import 'package:flutter/material.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:xmshop/app/routes/app_pages.dart';
import 'package:xmshop/app/services/fanFonts.dart';
import 'package:xmshop/app/services/keepAliveWrapper.dart';
import 'package:xmshop/app/services/screenAdapter.dart';
import 'package:xmshop/app/services/httpsClient.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({super.key});
  Widget _appBar() {
    return Positioned(
      top: 0,
      right: 0,
      left: 0,
      child: AppBar(
        leading: controller.flag.value
            ? const Text("")
            : const Icon(FanFonts.xiaomi, color: Colors.white),
        leadingWidth: controller.flag.value
            ? ScreenAdapter.width(40)
            : ScreenAdapter.width(140),
        title: AnimatedContainer(
          duration: const Duration(milliseconds: 600),
          curve: Curves.easeInOut,
          width: controller.flag.value
              ? ScreenAdapter.width(800)
              : ScreenAdapter.width(620),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromARGB(230, 252, 243, 236),
            borderRadius: BorderRadius.circular(30),
          ),
          child: InkWell(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsetsGeometry.fromLTRB(
                    ScreenAdapter.width(34),
                    0,
                    ScreenAdapter.width(10),
                    0,
                  ),
                  child: Icon(Icons.search),
                ),
                Text(
                  "手机",
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                ),
              ],
            ),
            onTap: () {
              Get.toNamed(Routes.SEARCH);
            },
          ),
        ),
        centerTitle: true,
        //配置AppBar透明效果
        backgroundColor: controller.flag.value
            ? Colors.white
            : Colors.transparent,
        elevation: 0,
        //内容滚动时阴影高度
        scrolledUnderElevation: 0,
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.qr_code,
              color: controller.flag.value ? Colors.black87 : Colors.white,
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.message,
              color: controller.flag.value ? Colors.black87 : Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  Widget _fcons() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(682),
      child: Swiper(
        itemBuilder: (context, index) {
          //"https://xiaomi.itying.com/${controller.swiperList[index].pic}"
          return Image.network(
            HttpsClient.replaeUri(controller.swiperList[index].pic),
            fit: BoxFit.fill,
            errorBuilder: (context, error, stackTrace) {
              return Container(
                color: Colors.grey[200],
                child: Icon(Icons.broken_image, color: Colors.grey[400]),
              );
            },
          );
        },
        itemCount: controller.swiperList.length,
        pagination: const SwiperPagination(
          builder: SwiperPagination.rect,
        ), //底部样式
        //自动轮播与无限轮播
        autoplay: true,
        loop: true,
        //箭头control: const SwiperControl(),
      ),
    );
  }

  Widget _banner() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(92),
      child: Image.asset("assets/images/xiaomiBanner.png", fit: BoxFit.cover),
    );
  }

  Widget _banner2() {
    return Padding(
      padding: EdgeInsets.fromLTRB(
        ScreenAdapter.width(20),
        0,
        ScreenAdapter.width(20),
        0,
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(ScreenAdapter.width(20)),
          image: DecorationImage(
            image: AssetImage("assets/images/xiaomiBanner2.png"),
            fit: BoxFit.cover,
          ),
        ),
        height: ScreenAdapter.height(420),
      ),
    );
  }

  Widget _category() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(550),
      //color: Colors.red,
      child: Obx(
        () => Swiper(
          itemBuilder: (context, i) {
            return GridView.builder(
              itemCount: 10,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                crossAxisSpacing: ScreenAdapter.width(20),
                mainAxisSpacing: ScreenAdapter.height(20),
              ),
              itemBuilder: (context, index) {
                //"https://xiaomi.itying.com/${controller.categoryList[index].pic}
                //"https://xiaomi.itying.com/${controller.categoryList[index + 10].pic}"
                return Column(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      width: ScreenAdapter.height(140),
                      height: ScreenAdapter.height(140),
                      child: Image.network(
                        i == 0
                            ? HttpsClient.replaeUri(
                                controller.categoryList[index].pic,
                              )
                            : HttpsClient.replaeUri(
                                controller.categoryList[index + 10].pic,
                              ),
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return Container(
                            color: Colors.grey[200],
                            child: Icon(
                              Icons.broken_image,
                              color: Colors.grey[400],
                            ),
                          );
                        },
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(
                        0,
                        ScreenAdapter.height(4),
                        0,
                        0,
                      ),
                      child: Text(
                        i == 0
                            ? "${controller.categoryList[index].title}"
                            : "${controller.categoryList[index + 10].title}",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(34)),
                      ),
                    ),
                  ],
                );
              },
            );
          },
          itemCount: (controller.categoryList.length / 10).toInt(),
          pagination: const SwiperPagination(builder: SwiperPagination.rect),
        ),
      ),
    );
  }

  //热销臻选
  Widget _bestSelling() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(
            ScreenAdapter.width(30),
            ScreenAdapter.width(20),
            ScreenAdapter.width(30),
            ScreenAdapter.width(20),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "热销臻选",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: ScreenAdapter.fontSize(46),
                ),
              ),
              Text(
                "更多手机推荐 >",
                style: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: ScreenAdapter.fontSize(38),
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(
            ScreenAdapter.width(30),
            ScreenAdapter.width(20),
            ScreenAdapter.width(30),
            ScreenAdapter.width(20),
          ),
          child: Row(
            children: [
              //自适应布局
              Expanded(
                flex: 1,
                child: SizedBox(
                  height: ScreenAdapter.height(738),
                  child: Obx(
                    () => Swiper(
                      itemBuilder: (context, index) {
                        //"https://xiaomi.itying.com/${controller.bestSellingSwiperList[index].pic}"
                        return Image.network(
                          HttpsClient.replaeUri(
                            controller.bestSellingSwiperList[index].pic,
                          ),
                          fit: BoxFit.fill,
                          errorBuilder: (context, error, stackTrace) {
                            return Container(
                              color: Colors.grey[200],
                              child: Icon(
                                Icons.broken_image,
                                color: Colors.grey[400],
                              ),
                            );
                          },
                        );
                      },
                      itemCount: controller.bestSellingSwiperList.length,
                      pagination: const SwiperPagination(
                        builder: SwiperPagination.rect,
                      ), //底部样式
                      //自动轮播与无限轮播
                      autoplay: true,
                      loop: true,
                      //箭头control: const SwiperControl(),
                    ),
                  ),
                ),
              ),
              SizedBox(width: ScreenAdapter.width(20)),
              Expanded(
                flex: 1,
                child: SizedBox(
                  height: ScreenAdapter.height(738),
                  child: Obx(
                    () => Column(
                      children: controller.sellingPlist.asMap().entries.map((
                        entrie,
                      ) {
                        var value = entrie.value;
                        return Expanded(
                          flex: 1,
                          child: Container(
                            margin: EdgeInsets.fromLTRB(
                              0,
                              0,
                              0,
                              entrie.key == 2 ? 0 : ScreenAdapter.height(10),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Expanded(
                                  flex: 3,
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                        value.title.toString(),
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(38),
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      SizedBox(
                                        height: ScreenAdapter.height(20),
                                      ),
                                      Text(
                                        "${value.subTitle}",
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(28),
                                        ),
                                      ),
                                      SizedBox(
                                        height: ScreenAdapter.height(20),
                                      ),
                                      Text(
                                        "￥${value.price}元",
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(34),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  flex: 2,
                                  child: Padding(
                                    padding: EdgeInsets.all(
                                      ScreenAdapter.height(8),
                                    ),
                                    child: Container(
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(
                                          ScreenAdapter.width(10),
                                        ),
                                        image: DecorationImage(
                                          //image: NetworkImage(pic),
                                          image: NetworkImage(
                                            "https://miapp.itying.com/public//upload//iFrB4izNiGzov22F2aJXX0ta.png",
                                          ),
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _bestGoods() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(
            ScreenAdapter.width(30),
            ScreenAdapter.width(20),
            ScreenAdapter.width(30),
            ScreenAdapter.width(20),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "省心优惠",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: ScreenAdapter.fontSize(46),
                ),
              ),
              Text(
                "全部优惠 >",
                style: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: ScreenAdapter.fontSize(38),
                ),
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.all(ScreenAdapter.width(26)),
          color: const Color.fromRGBO(246, 246, 246, 1),
          child: Obx(
            () => MasonryGridView.count(
              crossAxisCount: 2,
              mainAxisSpacing: ScreenAdapter.width(26),
              crossAxisSpacing: ScreenAdapter.width(26),
              shrinkWrap: true, //收缩，让元素宽度自适应
              itemCount: controller.bestPlist.length,
              physics:
                  const NeverScrollableScrollPhysics(), //禁止左右滑动，不写这个列表滑下去滑不上来
              itemBuilder: (context, index) {
                // var picUrl =
                //     "https://miapp.itying.com/${controller.bestPlist[index].pic}";
                return InkWell(
                  onTap: () {
                    Get.snackbar(
                      "进入商品详情页",
                      "${controller.bestPlist[index].title}",
                    );
                    Get.toNamed(
                      Routes.PRODUCT_CONTENT,
                      arguments: {"id": controller.bestPlist[index].sId},
                    );
                  },
                  child: Container(
                    padding: EdgeInsets.all(ScreenAdapter.width(20)),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.all(ScreenAdapter.width(10)),
                          child: Image.network(
                            HttpsClient.replaeUri(
                              controller.bestPlist[index].pic,
                            ),
                            errorBuilder: (context, error, stackTrace) {
                              return Container(
                                color: Colors.grey[200],
                                child: Icon(
                                  Icons.broken_image,
                                  color: Colors.grey[400],
                                ),
                              );
                            },
                          ), //替换
                        ),
                        Container(
                          padding: EdgeInsets.fromLTRB(
                            ScreenAdapter.width(20),
                            ScreenAdapter.width(10),
                            0,
                            0,
                          ),
                          width: double.infinity,
                          child: Text(
                            "${controller.bestPlist[index].title}",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(36),
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.fromLTRB(
                            ScreenAdapter.width(20),
                            ScreenAdapter.width(10),
                            0,
                            0,
                          ),
                          width: double.infinity,
                          child: Text(
                            "${controller.bestPlist[index].subTitle}",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(32),
                            ),
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.fromLTRB(
                            ScreenAdapter.width(20),
                            ScreenAdapter.width(10),
                            0,
                            0,
                          ),
                          width: double.infinity,
                          child: Text(
                            "￥${controller.bestPlist[index].price}元",
                            textAlign: TextAlign.start,
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(32),
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ],
    );
  }

  Widget _homeBody() {
    //print("https://xiaomi.itying.com/${controller.swiperList[2]["pic"]}");
    return Positioned(
      top: -ScreenAdapter.height(60),
      left: 0,
      right: 0,
      bottom: 0,
      child: ListView(
        controller: controller.scrollController,
        children: [
          Obx(() => _fcons()),
          _banner(),
          _category(),
          _banner2(),
          _bestSelling(),
          _bestGoods(),
          SizedBox(height: ScreenAdapter.height(100)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //缓存状态
    return KeepAliveWrapper(
      child: Scaffold(
        body: Stack(children: [_homeBody(), Obx(() => _appBar())]),
      ),
    );
  }
}
